WIP: 🛝 Playground #442

brettimus · 2025-01-17T10:55:38Z

Creates a playground folder that has a SPA that looks suspiciously similar to Studio.

It's using the designs in Figma

TODO

Remove playground/dist from git, since we can just publish new packages that contain the assets
Fix type error in embedded package when you add the spec
Use the auth headers / scheme defined in settings page
Many, many more things...

Running the playground

Easy. It uses port 6660 👹

cd playground
pnpm dev

Need routes?

Open settings
Toggle "Use mock api spec"

Publishing the embedded playground

The @fiberplane/embedded library is published with the playground assets. We serve those over the jsdelivr cdn.

To cut a new update:

First, update package.json to the new version.

Then update the typescript constant VERSION that's used in the CDN_URL variable to match the new package.json version (we will automate this eventually)

const VERSION = "0.0.18";
const CDN_URL = `https://cdn.jsdelivr.net/npm/@fiberplane/embedded@${VERSION}/dist/playground/`;

Finally, from project root:

pnpm build:embedded
cd packages/embedded
pnpm publish

This will use the dist files from playground in the published package as well.

Then, to integrate:

// If you have the api spec as json already, import it into your file and pass the raw, parsed spec as the `spec` property:

app.use("/fp/*", createMiddleware({
  // This can be any value at time of writing
  apiKey: "12345",
  // @ts-expect-error - The imported spec does not match our expected OpenAPIv3 type
  spec: apiSpec,
}));


// If you are using hono-openapi you can pass the unqualified path to your url, and the middleware will try to fetch it lazily
app.use(
  "/fp/*",
  // assuming you mounted your spec at the path `/doc` for this api
  { spec: "/doc" }
)

// alternatively, you can generate the spec on the fly and pass it to the spec param (NOT RECOMMENDED)
app.use(
  "/fp/*",
  createMiddleware({
    // @ts-expect-error - The imported spec does not match our expected OpenAPIv3 type
    spec: app.getOpenAPIDocument({
      openapi: "3.0.0",
      info: {
        title: "Lilo API",
        version: "0.0.1",
        description: "API documentation for Lilo",
      },
      servers: [
        {
          // url: new URL(c.req.url).origin,
          url: "http://localhost:6246",
          description: "Local",
        },
        {
          // url: new URL(c.req.url).origin,
          url: "https://lilo.fp.dev",
          description: "Production",
        },
      ],
    }),
  }),
);

Component copy-pasting

For now, many components are copied-pasted-modified from Studio.

The following things were removed during said copy-paste-modify

Bottom panel that shows logs, traces, AI test writer
All references to trace data
AI Request generation

The following was added:

The openapi spec is the source of truth for routes. Convert it to the ProbedRoutes type that studio expects in the UI.
You can change themes in Settings, or from the Command Bar

Getting the OpenAPI Spec

The middleware (@fiberplane/embedded) knows how to handle the spec parameter. It either passes through the spec, if one was passed as a parameter, or if the spec parameter was a string then it attempts to fetch the spec (it assumes the string is a URL to a json OpenAPI spec)

The middleware then serializes a ResolvedSpecResult type into the DOM.

The result can either be: success, error or `empty. If the Result is an error, it may have additional properties on it that communicate to the Frontend that the frontend should retry fetching the spec. ((I added this functionality because of issues I bumped into in production on Cloudflare workers.))

Theming

Needs more thought.

See playground/src/index.css

I had gemini try to convert all the tokens from figma into css variables, it may have gotten a few wrong.

I haven't put much effort into naming semantic tokens we can ultimately use in the UI alongside the shadcn ones.

Contrast is quite low for muted colors right now, that likely needs some tweaking.

Using orange for the accent color can get quite aggressive sometimes. We will likely want some overrides on the default button component that comes with shadcn in order to adapt it for our new designs.

…ound

* Embedded scaffolding wip * Rewrite embedded implementation to a middleware handler * Playground as an embedded app * Add CDN support for embedded asset loading * Add playground dist to the repo * Use js deliver cdn for api for now * Update build * Format --------- Co-authored-by: Brett Beutell <[email protected]>

* wip * Add auth section * Improve Auth stuff * Bearer form tweak * Minor tweak * Refactor AuthSelector

…oard shortcut

…layground

…om studio

* initial workflow setup * setup a simple api for now * WIP * WIP * remove workflows-api * stub workeroni * more UI updates * lockfile * update the workflows * attempt to load the openapi spec like the root app * vite redirects for dev * remove dead schema hooks * update data loading workflow routes * remove workeroni * mount the workflow routes on embedded * rework the interface for embedded playground mounting - serialize all options into data-options attribute on <div root> * update the hooks to load the updated data-options thing faster * simplify types * clean up workflow root * load openapi in to workflow/create * load initial three panel ui updates * resolved routeTree.gen.ts * update schemas so they parse correctly * change input types * update the detail view so it shows inputs * resolve the input runtime expressions to values from inputs * formattingggggg * add command bar and load the data in the component so it re-renders (as opposed to from route) * add a base prefix to fetch calls * for some reason getWorkflows got yeet * tsc complaints * bump version * more ts complaints * Playground auth tweak (#454) * Add spinner * Implementation of early design * Cleanup * ship fixes from late friday * resolve version dynamically from package.json * update layout with top bar * unify sidebar and use new screen without button * add floaty workflow input - WorkflowCommand * set default preloads for snippier effect * formatting --------- Co-authored-by: Jacco Flenter <[email protected]>

* Tweak routing logic * Fix routing * Format code * Simplify * Move settings to url And remove it from the uiSlice (since it's not being used there anyway) * Minor settings improvements * moved SettingsScreen component to avoid an issue with aria-bidden * tweaked behaviour so we don't end up with `settings=false` in the querystring * Undo change to index.html

stephlow and others added 30 commits January 13, 2025 14:23

Embedded scaffolding wip

fce5d2f

Modify gitignore for a sec

5be17ca

Add playground folder to monorepo

2390651

Use port 6660 for playground vite server

b15084f

unify the playground into the monorepo setup

5c99caa

update react to 19 cause why not

889f539

Start playing with colors

991a072

Format

ae6327c

set up tanstack router and port the current app to it

9fb9156

stuff

24a265e

Rewrite embedded implementation to a middleware handler

c1b015a

add mount path correction

da476aa

Factor out playground component and navigation

f1308fe

Scaffold the request and response viewer stuff

2079b75

Merge branch 'embedded' into embedded-playground

31a5a03

Playground as an embedded app

40b64ca

Tidy index.css and run formatter

8f306a0

Add theme switcher

319bf18

Default to system theme

83ce49b

Add CDN support for embedded asset loading

bb13d45

Add playground dist to the repo

18387a2

Use js deliver cdn for api for now

b0bc527

Merge remote-tracking branch 'origin/playground' into embedded-playgr…

32913bf

…ound

Merge branch 'main' into playground

f9fd352

Update root biome config for playground stuff

a969114

Basic routing setup for embedded

437bd67

Scaffolding for services

3a44354

Garbage part i (SQUASHME)

907bc57

First pass at importing spec

9531b6f

flenter and others added 30 commits January 22, 2025 17:03

Adding bearer token auth flow (#451)

c1a474b

* wip * Add auth section * Improve Auth stuff * Bearer form tweak * Minor tweak * Refactor AuthSelector

Improve faker tooltip

02e83f2

Remove text-gray styles from tabs

c45f9c2

Make our mock tightknit spec point to the mock tightknit api server

a4b263f

Remove double separator

104ff45

Change auth section styles

888c25b

Fix overflow that happened for large inputs on auth input

72bc8b5

Add helper text about persisting to local storage

79fe772

Fix type issues and fiddle with the ui for auth tokens

2239ba3

Fix add button

4604ffa

Make auth tab more kosher (with visible tabs types, etc) and add keyb…

e6ad77c

…oard shortcut

Update embedded package

8696c1a

Update gitignore

b75f80b

Update lilo worker embedded package.json

a6e10b9

Update npmignore for embedded package

9c5a444

Change playground html title and remove console log

8fa6af5

Remove eslint from playground

8b4a97e

Update README

cf3ea14

Add keyboard shortcut to modal for opening the help menu

2b008a6

Update note in playground vite config

b064b28

Add a note in the tailwind config about the custom colors we use in p…

874c461

…layground

Remove tester route

2b6cd36

Use barrel file for RouteDocumentation

e48a507

Remove unused assets, remove TODO, format

3320cb5

Make keyboard shortcuts modal cross-platform

adcf159

Remove Branding component (unused)

19eb23f

Update the resizable component in playground to have optimizations fr…

4b2b42b

…om studio

Allow keybindings on codemirror inputs

7ab7f95

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: 🛝 Playground #442

WIP: 🛝 Playground #442

brettimus commented Jan 17, 2025 •

edited

Loading

WIP: 🛝 Playground #442

Are you sure you want to change the base?

WIP: 🛝 Playground #442

Conversation

brettimus commented Jan 17, 2025 • edited Loading

TODO

Running the playground

Publishing the embedded playground

Component copy-pasting

Getting the OpenAPI Spec

Theming

brettimus commented Jan 17, 2025 •

edited

Loading